<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center">
		<view class="navBar w-full pl-30 pt-40 z-9999">
			<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
				<text style="opacity: 0;">名人堂详情</text>
				<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
			</view>
		</view>

		<view class="content flex flex-col align-items-center mt-40">

			<view class="flex flex-col align-items-center">
				<image :src="detail.avatar ? detail.avatar:male" class="avatar"></image>
				<view class="f-40 text-bold mt-30">{{ detail.name }}</view>
				<view class="flex mt-20">
					<text class="text-93776F f-24">{{ detail.dynasty }}</text>
					<text class="text-93776F f-24 ml-10">{{ `${detail.birthYear}-${detail.deathYear}` }}</text>
				</view>
				<view class="sound flex-center text-581403 f-24 mt-30" @click="playAudio">
					<image src="/src/static/icon-11.png" class="w-28 h-28 mr-6"></image>
					朗读
				</view>
			</view>

			<view class="mt-30 rich" v-html="detail.detailedContent"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onHide,
		onLoad
	} from '@dcloudio/uni-app';

	import dayjs from 'dayjs'
	import male from '@/static/male.png'

	const {
		api_get_hallOfFameDetail
	} = useRequest();

	const detail = ref({})

	const loadDetail = (id) => {
		api_get_hallOfFameDetail(id).then(res => {
			detail.value = res
			initAudio()
		})
	}


	// 播放控制
	const isPlaying = ref(false)
	const innerAudioContext = ref(null)

	function initAudio() {
		// 创建音频实例
		innerAudioContext.value = uni.createInnerAudioContext();

		// 监听播放事件
		innerAudioContext.value.onPlay(() => {
			isPlaying.value = true
			console.log('开始播放')
		})

		// 监听暂停事件
		innerAudioContext.value.onPause(() => {
			isPlaying.value = false
			console.log('已暂停')
		})
	}

	function playAudio() {
		if (!innerAudioContext.value) return
		// 设置音频源（支持本地和网络路径）
		innerAudioContext.value.src = detail.value.audioPath;
		isPlaying.value ? innerAudioContext.value.pause() : innerAudioContext.value.play()
	}

	onLoad((options) => {
		if (options.id) {
			loadDetail(options.id)
		}
	})

	onUnload(() => {
		playAudio()
	})

	onHide(() => {
		innerAudioContext.value?.destroy();
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 80rpx 40rpx 40rpx 40rpx;
		height: 1338rpx;
		background-image: url('/src/static/bg-06.png');
		background-size: 100%;
		background-repeat: no-repeat;


		.avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 32rpx;
		}

		.sound {
			width: 128rpx;
			height: 56rpx;
			background-image: url('/src/static/bg-07.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.rich {
			width: 610rpx;
			height: 750rpx;
			overflow-y: auto;
			scrollbar-width: none;
			/* Firefox 兼容 */
			-ms-overflow-style: none;
			/* IE/Edge 兼容 */
		}


	}
</style>